<template>
  <div class="home">
    <my-tab :tabList="list" @tab="tab"></my-tab>
     <ul class="count">
       <li v-for="(item,index) in list[checkIndex]?.child">
          <img src="../assets/jingtian.jpeg" alt="">
          <section>
            <h4>{{item.name}}</h4>
            <p>￥{{item.price}}</p>
            <div>
              <span>付款人数{{item.payNum}}</span>
              <button @click="add(item)">+</button>
            </div>
          </section>
       </li>
     </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from 'axios';
import { reactive,toRefs } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import MyTab from '../components/myTab.vue';
export default {
  name: 'Home',
  components: {
    MyTab

  },
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      list:[],
      checkIndex: 0, // 选中的索引
    })
    axios.get('data.json').then(res => {
      data.list = res.data;
    })
    const tab = (i) => {
       data.checkIndex = i;
    }
    const add = (val) => {
      // console.log(val);
      // this.$store
      // let arr = [1,3,4];
      // let arr1 = [2,5,6];
      // console.log(...arr);
      // let arr2 = [...arr,...arr1];
      // console.log(arr2);


      let obj = {
        ...val,
        ischeck: false,
        num:1
      }
      store.commit('addCart',obj); // 调用vuex 里面加入购物车的方法
      router.push('/about');
    }
    return {
      ...toRefs(data),
      tab,
      add
    }
  }
}
</script>
<style lang="scss" scoped>
  
  .count{
    li{
      display: flex;
      padding: 0 10px;
      margin-top: 10px;
      img{
        width: 80px;
      }
      section{
        flex: 1;
        margin-left: 10px;
        p{
          color: #8d3ec5;
        }
        div{
          color: #999;
          font-size: 13px;
        }
        button{
          float: right;
          font-size: 16px;
          border: none;
          background: #8d3ec5;
          padding: 3px 10px;
          border-radius: 16px;
          color: #fff;
        }
      }
    }
  }
</style>
